Starship

As showcased in our past blogs, Invision Community 5 introduces a brand new, modern interface which brings improvements to performance, aesthetics and mobile usability.
An optional side navigation panel, new view modes, light/dark modes, customizable header layouts, a search modal and a mobile navigation bar are some of the things we've showcased previously. Today, lets take a closer look at some other miscellaneous changes that we've been working on while developing Version 5, including some of the code reductions and performance improvements that we've been able to achieve in the process.
For those of you who are developers, we'll also give some simple explanations of how (and why) we've implemented these changes.
 
Widgets
Sidebar widgets are perfect for displaying content feeds, featured members, announcements, advertisements and more on your page. In version 4 however, the widget column would often become an empty space once the widgets had been scrolled past:
  widgets-v4.mp4  
In version 5, widgets now stick to the screen once the last widget has been reached, ensuring your readers have more convenient  access to your widgets rather than a void space:
  sticky-widgets-v5.mp4  
 
Messenger
The Messenger is a great way to reach out to members when a private chat is more appropriate than a topic. Inspired by modern email clients, the messenger in Version 5 has been revamped with a full-height, sticky inbox, a longer message snippet, mini profiles and a more polished UI - all with a 25% reduction in CSS and a 100% reduction in Javascript.
messenger-v5.mp4
 
Sticky elements
We've mentioned sticky elements a couple of times now, so lets take a look behind the scenes at how they're created, and some of the performance improvements with Version 5. Traditionally, sticky elements were created using Javascript which would calculate the position of the element on the page and adjust it's stickiness every time the page was scrolled. Scroll events can be quite taxing for browsers, and when it comes to Javascript, the less, the better (especially when aiming for great page speed scores)!
With that in mind, all sticky elements are now handled using sticky positioning via CSS, which is a native and much more performant way of controlling these elements. We've been able to replace an entire 400 line Javascript component with just 3 lines of CSS.
 
Grids and Masonry
Grids have previously been handled in a similar fashion. Javascript would scan all elements within a grid to determine how many could fit on a single line, and would then shuffle these elements into position after the page was loaded or resized. CSS has since introduced its own grid properties, which has allowed us to replace more than 350 lines of Javascript with just a few lines of CSS, resulting in more performant page rendering and nicer looking grids (especially on small-medium displays such as mobiles and tablets).
 

 
Fun fact: We first introduced a similar performance improvement to "masonry grids" in our Gallery update from January this year, by replacing more than 400 lines of Javascript with, you guessed it, just a few lines of CSS.
 

 
 
 
Click targets
We wanted to make Version 5 as simple as possible to navigate, and one way of doing that has been by implementing larger click targets. Clicking anywhere inside an entry in a table or grid will now take you to that entry (you can still click on other links like normal within the click target, such as subforums or profile links). Click targets are optional and can be disabled via your theme settings if necessary.
 
click-targets.mp4
 
Data Lists (tables)
Speaking of tables, they too have been revamped. Tables automatically adapt to the space they've been assigned to (for those curious, this is done using CSS container-queries), so they're always neat regardless of the screen size, with no overflow or squashed layouts. Behind the scenes, the two columns below are created with identical code, yet they're quite different visually due to the size which they've been allocated. Even with these improvements, tables have received a 25% reduction in CSS.
 

 
Profiles
Profiles have been polished for Version 5 and include some nice improvements such as sticky widgets and tabs. 
profile-desktop.mp4
 
On mobiles, the side column collapses into a carousel, and the sticky tabs allow you to easily flick between content types without scrolling to the top of the page.
profile-mobile.mp4
 

Tabs
You may have noticed in the above clip that tabs on mobiles are now scrollable, compared to a dropdown menu from version 4. We made this change to ensure that tabs are given more equal exposure on small devices, and have managed to reduce the CSS by a whopping 80%.
 
Carousels
Last and certainly not least, are carousels. Carousels are great for displaying large amounts of data in a confined space and they've been rewritten from scratch for version 5. Previously, a Javascript library was used to create the "scroll effect", however this has never been the smoothest experience on laptop trackpads and touch devices.
In version 5, carousels are powered by native smooth-scrolling and scroll-snapping, which results in a much nicer user experience, especially on touchscreens. We've been able to remove a staggering 95% of the Javascript, substituting it with just a few lines of CSS.
 
carousel.mp4
 
To be honest, we've only just scratched the surface here! In addition to these changes, we've modernized (and reduced code) in almost every component throughout the suite including avatars, cover photos, dropdown menus, forms, inputs, buttons, lists, off-canvas menus, side menus, columns and more!
Combined, these changes result in not only a significant reduction in code, but also a polished UI that performs smoothly on desktop and touch devices. We're excited to continue modernizing Invision Community well into the future as new technologies and techniques become available to us, and are looking forward to getting it in your hands in 2024.

Although we continuously review security within Invision Community, a major release such as 4.5 allows us to be especially proactive when it comes to keeping your community safe.
This blog entry outlines several enhancements to improve security in Invision Community 4.5.
Password Handling
Keeping your member's passwords secure is the simplest way to keep accounts safe and out of the wrong hands, so it makes sense to look at ways to ensure this doesn't happen.
Invision Community already uses strong one-way hashing when storing passwords, which means that once the password is stored in the database, there is no way to know the plain text version.
However, when creating a new member account via the AdminCP, a random password was created, and this was sent in the welcome email to the new member's email address.
As of Invision Community 4.5, this no longer happens, and the new member is invited to create a new password when visiting the community for the first time.

Part of your internal security procedures might be to force a reset of all passwords periodically. Invision Community 4.5 allows this on a per-member basis, or via a selection of filters to enforce a reset for many members at once.

This clears out any stored password hashes and emails the affected members to remind them to set up a new password.

AdminCP Security
The Admin Control Panel contains the most powerful tools available to Invision Community. This is already a very secure area with a separate login with an option to add two-factor authentication to the login flow.
Part of the session authentication has been a special key in the URL. While we have protection in place to prevent this special key being discoverable by a malicious user, there remains an incredibly remote theoretical chance that this could happen with a series of complicated steps. There was an additional annoyance that you are unable to share links within the AdminCP to members of your team due to the increased protection to keep URLs safe.
As of Invision Community 4.5, we have removed the special key from the URL and moved it elsewhere in the session authentication flow. This means that it's impossible to fetch the special key via the URL and links can now be shared and will survive a login action.
Text Encryption
There are a few areas within Invision Community that we use text encryption to allow us to save data in the database in a format that is encrypted when saved and decrypted when read. This protects you in the incredibly remote event of your own hosting being compromised and your database downloaded (of course, our Community in the Cloud customers do not need to worry about this!)
Invision Community 4.5 improves on this encryption by using PHP's built-in methods which give "bank-level" security to our encryption.
Security is critical to the success of your community, and we are always proactive in improving security throughout Invision Community.
Do you have any comments on this entry? Let us know below!

Every single day, your members are searching your community for answers or interesting conversations to join.
Wouldn't it be great if you could learn what is being searched for to identify hot issues, commonly asked questions and discover trends?
We thought so too, which is why Invision Community 4.5 comes with search statistics.
For the first time, Invision Community gathers anonymized information on what your members are searching for so you can use this to highlight more relevant content and shape strategic decisions with your community's structure.

Search statistics help you track searches performed on your community
When a member searches, their identity is converted into a unique key that cannot be reversed to identify the member. This allows us to track a single member's search usage over many search sessions without being able to link it to a specific member account.
The AdminCP now features a dashboard to review the most popular search terms as well as a raw log of recent searches along with the results they returned.
We have a lot of ideas in mind for additional changes down the road with the tracking of popular search terms, but for now, we hope you like the new statistics page and find the information presented useful for your future site plans.

It's very easy to focus on a single metric to gauge the success of your community.
It's very common for community owners to look at page hits and determine if their SEO and marketing efforts have paid off.
Getting traffic to your site is only half the equation though. The most valuable metric is how many casual visitors you're converting to engaged members.
Invision Community already makes it easy for guests to sign up using external services such as Facebook, Twitter and Google.
However, there has to be a conscious decision to click that sign-up button. For some, this may be a barrier too many.
Invision Community 4.4 reduces this barrier by allowing guests to create a post to a topic they want to engage with.
Once they have posted, they are asked to simply complete their registration. They are more likely to do this now they have invested in your community.
This will be incredibly valuable when you consider how much traffic a forum receives from inbound Google searches. With Post Before Registering, you'll increase your chances of turning that inbound lead into a registered member contributing to your site.
Let me take you through the feature and show you how it works.
When browsing the community guests will see the ability to submit a post, with an explanation that they can post now and complete registration later. The only thing they have to provide in addition to their post is an email address.

Posting as a guest
This works in any application for new content (topics, Gallery images, etc.) as well as comments and reviews. It will only show when a newly registered member would be able to post in that area - for example, it will not show in a forum that only administrators can post in. 
After submitting the post, the post will not be visible to any user, but the user will immediately be redirected to the registration form with an explanation to complete the registration. The email address they provided will already be filled in.

Registration form after posting as a guest
At this point, the user can either fill in the registration form, or use a social sign in method like Facebook or Twitter to create an account. After the account has been created, and validation has been completed if necessary, their post will automatically be made visible just as if they had registered and then posted.
If the user abandons the registration after they've submitted their post, an email will be sent to them to remind them to complete the registration.

Email reminding user to finish registering
 
Some Notes
Invision Community already has a feature that allows guests to post as guests without registration if granted permission. That feature has not been removed and so if you already allow guests to post, the behaviour will not change. This new feature is only available when a guest can't post in a given area, but a member would be able to. The entire feature can also be turned off if undesired. If the area the guest is posting in requires moderator approval, or newly registered members require approval of new posts, the post will enter the moderation queue as normal once their account has been created. Third party applications will require minor updates to support this feature. Once your casual visitor has invested time in your community by crafting a post, they are much more likely to finish the registration to get it posted. If you have set up external log in methods, then registration only takes a few more clicks.
This blog is part of our series introducing new features for Invision Community 4.4.

Who remembers the earlier days of the internet? Back when you popped your logo at the top left of your site and you were largely done?
Invision Community has continually developed to account for all the new services that have been built during our 16 years.
We now have social media sharing images, favicons and more to consider.
Invision Community 4.4 also adds mobile application icons, Safari mask icons and data for an application manifest. Handling of these logos and icons was a prime candidate for improvement in 4.4.
Moving our current options
Step one for improving our handling of these images was to move our current options out of themes and to allow them to be managed suite-wide from a single area. You can still upload a logo image per-theme (which shows in the header area), but the rest of the options have now been relocated to a new area: Customization > Appearance > Icons & Logos.

Adding new options
After giving favicon and share logo management its own dedicated area, we took a look at enhancing the configuration options made available through the interface without requiring theme template edits.
Multiple share logos
You can now upload multiple share logos. If you elect to upload more than one share logo, Facebook and similar sites will generally either show a carousel to allow you to choose which logo to use when sharing, or simply use the first image referenced.
Application icons
You can now upload an image to represent your website which will be used to generate the "home screen" icons for iPhones and Androids automatically. Uploading a single image will result in several different copies of the image (in different dimensions) being generated, and mobile devices will automatically choose the best option from the list as needed.
Safari mask icon
You can also now upload a Safari Mask icon, which is used to represent your website in certain areas on Apple computers (such as on the "touchbar" of certain keyboards). This image must be an SVG image with a transparent background, and all vectors must be 100% black.
Additionally, you can specify the mask color which is used to offset your image when necessary (e.g. to represent it as "selected" or "active").
Application manifest
In order for devices to support the application icons that you upload, a file known as a web manifest must be generated and delivered to the browser. This now happens automatically, using details and icons specified in the AdminCP. Certain details, however, can be configured explicitly from the Icons & Logos page:
Short name
This is a short name to represent your site in areas with limited screen space, such as below your application icon on a mobile phone home screen. Site name
This is the name of the site. The "Website name" setting is automatically used if you do not explicitly override it when configuring the manifest. Description
A short description of your site Theme color
You can choose a (single) color to represent the general theme of the site. This color may be used by devices in areas such as the address bar background. Background color
You can also choose a (single) color to use as the background color for your site when the application is launched from a shortcut saved to the user's device home screen. Display mode
Finally, you can specify the display mode your site should launch in. For our more astute designers and developers, you may have already realized that generating the manifest file lays the groundwork for future PWA (Progressive Web App) development and support. Additionally, some Android devices will automatically prompt users to add your website to their home screen now that a manifest file is generated by the site.
Oh, and for the sake of completeness, we also generate the special browserconfig.xml file that Microsoft products (including Microsoft Edge, Internet Explorer, X-Box, and Microsoft-based mobile devices) look for when pinning sites and generating live tiles. There are no additional configuration options for this file - everything is automatically generated from the aforementioned options.



The end result?
Your community can now better convey, automatically, certain details to the myriad of devices out there that may be accessing your site, and you now have much better control over those details. You can more easily fine-tune the "little things" that help paint a complete picture of your web presence, and the groundwork has been laid for bigger and better things in the future as standardization and adoption of PWA functionality improves.
This blog is part of our series introducing new features for Invision Community 4.4.

This entry is about our IPS Community Suite 4.2 release
I made a quick video to demo things we have already announced for 4.2 so far.
Enjoy  

We are well into development on IPS Community Suite 4.2 and are excited to start announcing all the new features and improvements.
Our next big release is focused on engagement with your members. You will see enhancements to our Reputation system, new ways to encourage people to register on your community, and enhancements to existing features to make them more interactive. There are also entirely new capabilities we cannot wait to show you ranging from new ways to organize content to tools to help promote your community.
Version 4.2 also features a refreshed AdminCP and default front-end design. Theme changes in 4.2 are mostly in the CSS framework so your existing themes will either work without issue or require minor changes to work in the new version.
Over the next several weeks we will be posting news entries with previews of upcoming features fairly often. Be sure to follow our News section, our Facebook, or Twitter to stay up to date.
We expect IPS Community Suite 4.2 to be out in mid-2017 with a public preview available sooner.
Everyone at IPS has worked very hard on this update and we think you will love it!

We are improving our integration options with analytics tracking services to better track and credit all page views. Our focus here was to add the ability for IPS Community Suite to communicate with your analytics tracking provider of choice when it does page change events that do not otherwise get tracked.
Some tracking providers do not understand that an inline AJAX page load (one that loads new content without a full page refresh) should still count as a new page. Even though your browser did not do a full reload, all your content is different so it should count in your metrics.
To solve this issue, IPS Community Suite can now automatically put in custom code to execute on pagination. We include Google Analytics and Piwik code by default and there is also an option to include your own custom pagination event code for other services.

Analytics in AdminCP
If you already have your Google Analytics code in our existing (basic) analytics system then the Suite will detect this on upgrade and automatically enable the new pagination tracking. The screenshot above shows the "Other" option if you do not use Google Analytics or Piwik. If you have other providers you want us to consider just post a feedback topic.
Note: be sure that you embed Google Analytics into your Suite using the built-in analytics system. If you simply pasted the code into your theme templates then we cannot automatically enable the new tracking.
We hope this new feature allows for easier integration with analytics tracking providers and also gives you much better insight into your traffic by properly counting all the page views you may currently be missing out on!
 
This change will be in version 4.1.17 which is scheduled to be released in early December 2016.

I'm pleased to announce we're finally ready to open our new Developers area. The aim of this project has been to improve our existing developer documentation by building a central place to contain it, as well as update and expand the content available.
As of today, we have the regular documentation and REST API documentation ready to use. Over the coming weeks and months, we'll be expanding what's available further, going into more detail about the tools available within the framework. We've also started work on comprehensive Getting Started guides, that will walk you through simple developer projects from start to finish - these will be available soon, once they're complete.
If there's a particular aspect of IPS4 development that you don't feel is adequately catered for right now, please let us know! This will help us direct our efforts to the most useful places.
Enjoy!

IPS4's theme system has a feature called template plugins, which are special tags that do something to the values you pass in. You'll see them throughout the templates - they look like this:
{lang="..."} This tag displays the language string for the key you pass into it, and is probably the most commonly used one. But there's many others too, so let's review some of the useful ones you can use in your themes and addons.
 
{member}
If you need to show any data about a member, the {member} tag is very useful. It's a shorthand that can display properties and call methods on a member object, so it's much neater than the manual approach. It's used like this:
// Get a property, like 'name' {member="name"} // Call a method, like 'link()' {member="link()"} By default, it will work with the currently logged-in member, but you can pass an id attribute to show data about any member:
// Show the name of member #67 {member="name" id="67"}  
{expression}
The expression tag allows you insert simple one-line PHP expressions into your templates. For example, if a variable is an array of values and you want to show one per line, instead of writing a loop, you could do:
{expression="implode( '<br>', $myArray )"}  
{prefix}
The prefix tag is unusual in that it's designed specifically for use in CSS files. It prefixes CSS styles with the various vendor prefixes, meaning instead of writing:
.myClass { -webkit-transform: scale(3) rotate(45deg); -moz-transform: scale(3) rotate(45deg); -o-transform: scale(3) rotate(45deg); transform: scale(3) rotate(45deg); } You can write:
.myClass { {prefix="transform" value="scale(3) rotate(45deg)"} }  
{hextorgb}
Continuing with the CSS theme, next there's the "Hex to RGB" tag. If you're a theme designer and want to use a theme setting value but apply some transparency, this tag will be particularly useful to you. Color theme settings are simple hex values, e.g. #000000. To apply some transparency, you need to use the rgba notation however (the 'a' meaning 'alpha channel', otherwise known as transparency). The {hextorgb} tag does this for you.
It accepts either a hex color, or a theme setting key. By default it outputs the same color in rgb notation, but if you want to add transparency, you can add an opacity parameter which will represent the alpha channel value.
{hextorgb="#ff0000"} --> rgb(255,0,0) {hextorgb="page_background" opacity="0.6"} --> rgba(235,238,242,0.6)  
{truncate}
Finally, there's the truncate tag. This tag takes some text (usually as a variable), and truncates it to the length you specify. By default it appends an ellipsis (...) to the end of the content, although this is configurable via the append parameter.
{truncate="$someLongText" length="300"} Note that this isn't designed to be used on HTML markup; you may break your page if HTML tags are included in the text. For those cases, consider using the javascript ipsTruncate widget instead.
 
I hope this overview of 5 lesser-known template tags will help you as you build themes or applications! Share your related tips in the comments.