Jump to content

Luuuk

Clients
  • Posts

    427
  • Joined

  • Last visited

Reputation Activity

  1. Like
    Luuuk got a reaction from David N. in Error message: You are not permitted to register a user account with this site.   
    Hi,
    Check this topic on other forum based on IPS 4.x:
     
  2. Like
    Luuuk reacted to Ehren in 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.

    View full blog entry
  3. Like
    Luuuk reacted to DawPi in Ban/block feature needed   
    Well written @Joel R, well written...!
  4. Like
    Luuuk reacted to Joel R in Ban/block feature needed   
    This is not to provide feedback on the feedback (how meta!), but to provide some conceptual philosophy around communities vs social media for other Invision Community owners.  
    Social media, at its philosophical core, is meant to be 1-to-many.  Its a single user broadcasting his thoughts or feedback at large to the world ("look at this interesting thing I did today!").  It is most similar to Status Updates in IPS.  
    Forums are meant to be many-to-many. It's many users who publish their collective thoughts ("what do you think about X?"). When you enter the forums, there is an intrinsic understanding that you agree to the public discourse, whether you agree with the opinions or not. You voluntarily opted in to the community at large. 
    I view it like a workplace.  You may not like all of your coworkers, but you coexist because you have a unified and larger purpose.  
    Targeted ignores at one person should be applied only in areas where the publication of content is meant to be 1-to-many.  This means areas such as: personal messages, status updates, private albums, private blogs.  
    Targeted ignores in other areas, such as forums, don't make sense.  Just because you ignore a person doesn't mean that his contribution to the conversation - and the quotes and requotes and related conversation - will stop.  The conversation continues, and the contribution is part of the public discourse.  
    In a community, the philosophy of ignore should be held to the standard of the community level, not the single user level.  Does the user break the community standards that are universal to all members? This standard is in contrast to: do I personally like or want to tolerate this other person? 
    On a final note, I want to emphasize that i share these thoughts not because I'm trying to stop any feedback of Ignore.  There are some great suggestions in there! But I also think community managers need to not let technology be the go-to fix of human behavior all of them time.  Community management is ultimately people management more than tech management. Sometimes we need to talk - openly and bravely - about tolerating people we don't like in the pursuit and conversation of a larger goal.
  5. Like
    Luuuk reacted to Ehren in Invision Community 5: The All New Theme Editor   
    Welcome to the third video of our sneak peak series! Today, we're really excited to introduce you to the new Theme Editor!
    Built entirely from scratch, the new editor provides an instant, live preview of your theme, as soon as you modify a setting. It's a zero-code approach to creating themes, and has been designed to ensure your theme adheres to your color scheme and looks great on every device, with very little effort. Let's take a closer look!
     
    Paragraph 1.mp4
     
    To the left of the editor, you’ll see a live preview of your community. You can navigate to any page, as if you were browsing your site normally. At the top left of the editor, you’ll find icons which change the theme between the light and dark color schemes. Below that are buttons which change the viewport size, from desktop, to tablet, to mobile. This is a really convenient way to ensure your theme looks great on every device, without needing to manually resize your browser window.
    Lets take a closer look at the Color Palette.
    Editing colors in version 4 was a fairly time consuming process. For example, modifying the color scheme from the default blue to another color meant that 26 theme settings needed to be changed. In contrast, the Version 5 theme is powered by just 3 colors: Primary colors are responsible for styling the main elements on your page, such as the Start new topic button. Secondary colors control minor elements, such as pagination links, while the Base color is responsible for controlling the overall tint on your site.
    Clicking on these colors opens a color picker. Let’s change this blue color to yellow.
     
    Video 2.mp4
     
    You’ll notice two things have happened here. First, the preview window updated as soon as we modified the color. All elements which were previously blue, now use yellow, such as the Start new topic button. Secondly, the text color in our button has changed from white to black. This is our automatic contrast feature and it ensures our text is easy to read on our new yellow background, since white text may be more difficult to read for some viewers.
    Below the color picker is a text box, with our color displayed in HSL. You can paste your own colors in this box, in any color format and that color will be applied to your elements.
     
    Video 3.mp4
     
    The Base color controls the tint of your backgrounds and text colors. Let's try a few examples to demonstrate how easy it is to recolor your theme.
     
    Video 4.mp4
     
    Next up are Logos! Invision Community 5 has three logo types: a text logo, an image logo for desktops and an image logo for mobiles. Let’s edit our text logo.
     
    Video 5.mp4
     
    After changing the text to “Theme Editor Demo”, we can see that the logo in our preview window updates instantly with our new text. Below that, we have multiple options to help us style the text logo, such as font-family These fonts are a combination of system fonts and web fonts. The web fonts are hosted locally on your site for optimal performance. Additionally, we can also change the font-weight and font-size. We might want a different font-size for mobile logos, so that can be edited too. We can see a live preview by changing our viewport to the mobile option.
    If you’d prefer to use an image logo, you can assign it using the Image Logo options. Image logos are made up of 2 upload fields, one for the light theme and one for the dark theme. Below these upload fields, a slider lets you resize your logo so it fits neatly.
     
    Video 6.mp4
     
    Layout options let you assign the default layouts in your community. In our first sneak peak video, we showcased the new side panel layout, feed view for forum categories, and compact view for topics. These can all be enabled via the theme editor using a simple select menu.
     
    Video 7.mp4
     
    Lets explore some Color options! In the Header panel, we can see a list of elements we can customize. Clicking on an element opens the Swatch List, which is a list of 22 colors that are powered by the Base, Primary and Secondary colors from earlier. We have 6 "light" base colors, 6 "dark" base colors as well as various shades of our primary and secondary colors. Clicking on any of these swatches will apply that color to your element.
    But what if none of these colors suit your requirement? That’s where the Color Picker comes in handy. Here, we can easily choose any color, or even paste in our own color like before.
     
    Video 8.mp4
     
    A major hurdle with themes in version 4 was customising the header. Depending on the complexity, this would typically involve modifications to both the CSS and HTML. That is a thing of the past with version 5! If we flick over to our Settings tab, you’ll see a brand new interface for customising the header. A new drag and drop feature allows you to easily reposition header elements without touching a single line of code.
     
    Video 9.mp4
    It’s an incredibly fun tool to play with, and we’re really excited to hear what you think!
    Below the drag and drop area, we can customise the header further by using sliders to adjust its height, or we can enable navigation icons with a single click. Body settings let you can customise global elements such as the body background color, text colors, the max-width of your site, the font-family, font-size and more.
    Editing Content boxes has always required code modifications in the past. Using this new editor, we can adjust not only the colors of the boxes, but also the borders and shadows. Theme editing has honestly never been this easy!
     
    Video 10.mp4
    And there you have it! Our brand new theme editor. With a few simple clicks and drags, we've been able to create a customised theme that looks great on desktops and mobiles, with a new color scheme, new logos, a customised header, new page layouts and restyled content boxes - all without touching a single line of code.
    Speaking of code, for those of you who want to apply more advanced customisations, we’ve added a really convenient way to access your custom CSS file, via a new dialog box.
    Video 11.mp4
    And last but not least - the new theme editor is fully responsive, so even if you’re away from the desk, so you’ll be able to change colours and settings, upload new logos, redesign your header and even add your own code!
     
    Video 12.mp4
     
    Developing this new editor has been a lot of fun, and it’s even more fun to use. Themes have never been easier to edit and we're really excited for you all to get your hands on it so you can have a play for yourself - but for now, let us know what you think the comments, and we’ll see you next time!

    View full blog entry
  6. Like
    Luuuk reacted to WP V0RT3X in Marketplace Closure   
    I think this is the best decision IPS has made in years. The only thing customers will lose is some comfort, but the bottom line is that it is the best for all. 
    What you are suggesting is that developers have to release 2 versions. Means a lot more work and then have to pay to release a free version. Why should someone do that?
    I promise you nothing will be lost, there will be even more. More applications, more translations... more freedom. Not on this website, just on another one.
  7. Like
    Luuuk reacted to Joel R in Marketplace Closure   
    My goal is to provide a listing directory to make it easy for developers to list their apps.
    A directory will provide visibility, scale, and ease for everyone to visit.  
    Developers will handle payments and support on their own.  
  8. Like
    Luuuk reacted to Robert Angle in Marketplace Closure   
    This is worth noting, actually. I'm not a developer, but I think I remember seeing something about a non-compete clause with Marketplace submissions. For example, when it was announced Status Updates were going away, there was concern that current Marketplace rules would prevent a developer from creating a Status Updates application. Invision responded that they would alter the terms so such an app could be created.
    Well, here's the altered terms, lol. With no central Marketplace, developers can create anything they want, even if it does what the core software pretty much already does, but perhaps with a different enhancement or twist.
  9. Like
    Luuuk reacted to Matt in v5 news coming soon...   
    Already done. 
  10. Like
    Luuuk reacted to Afrodude in v5 news coming soon...   
    Then, we are in very excellent hands in this situation. We are really fortunate to have him on board since he truly is one of the greatest. 🙂 
  11. Haha
    Luuuk reacted to Matt in v5 news coming soon...   
    In @Ehren we trust.
  12. Agree
    Luuuk reacted to Afrodude in v5 news coming soon...   
    I hope you guys also have found a solution to the light/dark themes issue on copying and pasting.
    Dark Theme = Already done. 
    Light Theme =  Already done.
    In many cases, it's much worse because the text is unreadable.
    The problem has already been brought up, but as usual, none of you have made any comments.
     
  13. Like
    Luuuk reacted to Ehren in [Cosmetic] Author Badge on Firefox   
    Thanks, this seems to be a rendering issue with Firefox and semi-transparent gradients. At the time, it was the only way to blend currentColor with a semi-transparent version of the background color.
    This can now be done with color-mix. If you'd like to update it on your site, adding this to custom.css should do the trick:
    @supports (color: color-mix(in srgb, red, blue)){ .ipsBadge{ background: var(--badge--background, color-mix(in srgb, currentColor 10%, rgba( var(--theme-area_background_reset), 1 ))); } }  
  14. Agree
    Luuuk reacted to opentype in [4.7.11] Account deletion request: No options what to do with the user's content?   
    If necessary, one can change the language string to clarify that this does not include posts. 
    I have it in my terms of service that personal data should never be included in posts and that account deletions will not delete posts. So users agree to that. If personal data ends up in individual posts, I deal with that on a case-by-case basis and delete the personal data or the entire post. But it makes little sense to delete possibly thousands of posts just because there is a chance that one of these posts could contain something personal. 
  15. Agree
    Luuuk got a reaction from olavrb in CKEditor - Allowed vs. Disallowed content   
    Hi,
    Related to this topic.
    Currently we have Editor Settings > Advanced > a selective GUI for ACF "to loosen the restrictions". I think we need also a complementary filter to do the opposite without disabling rich text. See Filtering Pasted and Dropped Content.
    An additional filter (called paste filter) can be configured to handle pasted and dropped content. It will be applied independently from ACF, so it can be used as the only filter (with disabled ACF), or as a complementary filter (for example to filter pasted content with stricter rules than all other content).
  16. Haha
    Luuuk got a reaction from SeNioR- in [Suggestion] URL Replacements - V5   
    I have to agree.
    Those replacements can even totally change a meaning and while the link could be "easier to remember" but for wrong reasons. Let me use the following extreme example from Polish language:
    "łaska" vs "laska"
    They are actually two different words and each of them have multiple meanings and none of them cross each other.
    - The first one could be: "would you be so kind...", "grace", "pity", etc.
    - The second one could be: "walking stick" but in a slang also a "hot girl" or "blowjob" 😆. Imagine the word placed in an unfortunate combination and you'll get a link sounding like a p*rn.
    Jokes aside, such problem could be in different languages too so you can't guarantee what actually you render as a "message" in the link...
     
  17. Agree
    Luuuk reacted to Grafidea in [Suggestion] SVG support - V5   
    Hi! It would be nice if the V5 version supported the graphic format - SVG everywhere. It's a vector format that looks good virtually anywhere and doesn't lose quality! Currently, it is missing from logos, custom forum icons, favicon and many other places. It's about handling .svg graphics as well as svg code.
  18. Like
    Luuuk got a reaction from Genestoy in Templates & CSS missing in ACP   
    Like I said, you don't need to upgrade to get around the issue. Just remember to close the IPS message (every time it is re-appearing) and reload the page. That's all.
  19. Like
    Luuuk reacted to Petr Makarov in Add random WYSIWYG block   
    Thanks. Looks good
  20. Like
    Luuuk got a reaction from Petr Makarov in Add random WYSIWYG block   
    Check this out:
     
  21. Like
    Luuuk got a reaction from SeNioR- in Add random WYSIWYG block   
    Check this out:
     
  22. Like
    Luuuk reacted to Nathan Explosion in Option to set a default Code syntax highlighting   
    Well, yes...it is posted a few posts up, and the plugin that was made for those that don't want to edit the template has since been added to this:
     
  23. Agree
    Luuuk reacted to Randy Calvert in Tool bar on the Editor Resetting   
    Sorry, not me.  
  24. Thanks
    Luuuk got a reaction from balazsp in Static version export ?   
    Oh yes. I know what exactly you are up to. As I said: "for now" = just wanted to provide a temporary "solution" until the whole page will be secured in other way. Could not provide any other way since I did not test the spiders at all.
  25. Like
    Luuuk got a reaction from Stuart Silvester in [This site] Account Settings warning   
    Thanks. The warning is gone in my account here.
×
×
  • Create New...