Jump to content

Iwooo

Clients
  • Posts

    174
  • Joined

  • Last visited

  • Days Won

    1

Reputation Activity

  1. Like
    Iwooo reacted to Ehren for a blog entry, Invision Community 5: A more performant, polished UI   
    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.
  2. Like
    Iwooo reacted to Matt for a blog entry, Welcome to Invision Community 4.4!   
    We're thrilled to announce that Invision Community 4.4 is available to download now.
    After months of development, over 1650 separate code commits and quite a few mugs of questionable coffee you can now get your hands on the beta release from the client centre.

    Not our office
    Invision Community 4.4 brings numerous new features, over 450 bug fixes and a lot of refinement.
    We've been talking about the highlights since September on our blog.
    Here's a recap of all that we've added.
    We'd love to know which is your favourite feature so far!

    Drop a line below and let us know!
     
  3. Like
    Iwooo reacted to Matt for a blog entry, We're now using Invision Community 4.3!   
    Cue the music; switch on the dramatic lighting, we've got fantastic news!
    We're now running Invision Community 4.3 on here for some advanced testing before we unleash the first beta release.

    There's a subtle hint above
    If you need a recap of what was added, take a look at our product updates blog which takes you through the highlights.
    As this is a pre-beta release, expect some funkiness as we scurry around and tidy up our custom theme wrapper and other areas as we spot them.
    If you you find a bug, we'd love for you to report it with as much detail as you can muster in the bug report area.
    We'd love to know what you think, let us know below.
  4. Like
    Iwooo reacted to Rikki for a blog entry, New: Reactions   
    This entry is about our IPS Community Suite 4.2 release.
    IPS Community Suite has long had a reputation system; first we had a simple up/down system, later updated to introduce a Likes system as an alternative. Whichever system you chose to use, it tied in with our reputation system.
    We're pleased to introduce the latest updates to the reputation system, and it's something that has been requested for quite some time: Reactions.
    Quite simply, reactions allow users to offer more fine-grained sentiments towards content than a simple up/down or 'like'. They are now in common usage on social networks, and so users expect to be able to be more nuanced in their response to something they see.
    Let's see how they work in a post, and then cover the options you'll have available.

    What you see above is the default setup for a site that has used the Like system in version 4.1. We include 5 reactions by default:
    Like Thanks Confused Sad Haha If you currently use the older style up/down reputation system, don't fret - you'll still get the new reactions on upgrade, but they'll be disabled by default and instead the new reaction UI will show up/down reactions. This gives you the flexibility to decide which of the new reactions, if any, you want to allow.
    So, those are the basics - but what configuration options can you expect to see? First, you can of course add your own reactions! We expect that beyond the default reactions you'd expect to find, some sites will want reaction types specific to their use-case. On an intranet, you might want to have 'agree' and 'disagree' reactions for staff to use when responding to discussions. On a gaming community, you might replace the icons to be some graphic from a video game that means something to your particular userbase. There's a wealth of possibilities.
    Each reaction you set up can be configured to adjust the original author's reputation count - a reaction can be positive (i.e. award a reputation point), negative (i.e. subtract a reputation point), or neutral (i.e. leave the reputation count unchanged). Our default set won't include any negative reactions, but you are free to configure these and new reactions to suit your own use-case. A user's total reputation count is still shown alongside their content and in their profile, of course.
    If you don't want to use the new reactions for whatever reason, you can disable all of them except Like, and it'll behave just the like 4.1-and-earlier system:

     
    Sites that currently use the up/down system don't show a list of names of users, and instead show an overall reputation score for the content. With the new reaction system, you can enable this even if you don't use up/down reactions. This is great if you plan to use reactions as, for example, an agree/disagree system, or where the content score is more important to your site than the individual reaction types.

    How the reaction UI looks with the 'count only' setting enabled
    As you'd expect, you can click individual reaction counts (or the overall reputation score, if you enable that setting) to view who reacted to the content. This remains a permission setting that you can apply per-group.

    On touch devices, on-hover functionality is not suitable, and so for these devices the reactions UI looks like this:

    Reactions play well with all areas of the suite, including Recommended Replies:

    ...and activity streams...

    ...and a couple of places we aren't quite ready to reveal yet  
     
    We hope you're looking forward to this new feature as much as we are. It's already been a hit on our internal testing site, and we're looking forward to seeing how clients customize it for use on their own community.
    Developer note: Reactions are one of two new features (the other currently unannounced) so far that make use of PHP Traits.
  5. Like
    Iwooo reacted to Charles for a blog entry, Video: 4.2 So Far   
    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  
  6. Like
    Iwooo reacted to Charles for a blog entry, IPS Community Suite 4.2 Coming Soon   
    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!
  7. Like
    Iwooo reacted to Rikki for a blog entry, New in 4.1.13: Personal Messenger Improvements   
    In line with our aim to make incremental improvements in each release, I wanted to go over a few of the small but useful changes to the personal messenger that you'll find in our next release, 4.1.13.
     
    Read/unread filtering
    The first improvement is that you can now filter the message list by read and unread, making it a little easier to browse through just the messages you're interested in.
     
    Search improvements
    Next up, the messenger search has been improved in a couple of ways; first, you can now also search the names of both the recipients and the senders, and second, we've added a menu so you can specify which fields in particular you want to search by.
     
    Easier moving
    Finally, we've added a popular request - the ability to use the mass-move tool inside the messenger. You can now check multiple messages, and the usual mass-action toolbar will appear that will allow you either move them to another folder, or, has been the case in the past, delete them.
     
    While these are each small improvements by themselves, we hope the incremental changes in each release add up to a more pleasant experience for users. 
×
×
  • Create New...