Skip to content

v3 & Harmony diary / thoughts / code snippets

Announcements
55 4 30.4k 1
  • More styling work completed today. Started looking at an decent alternative to the scroll top navigator featured on this site. I designed this a while ago and it’s designed to mimic the post scroller in Persona. With a little bit of modification, it would fit harmony very well in my view.

    Currently the code I wrote for this is lying dormant on a VM I created for v3 development but since abandoned when the announcement around the harmony theme was announced. Its going to be hard to walk away from what constitutes around 100 hours of new CSS and js but this was designed for Persona, and my thoughts are given all the fanfare with Harmony, the previous staple theme will fade into obscurity - perhaps no longer developed, meaning I’d have to both fork the last version and maintain it going forward.

    Honestly, I just don’t have time to commit to that, so the decision to turn my back on Persona development has been made, and it’s all harmony from now on. Sadly, this does mean the death knell for the conversation style CSS I developed. I won’t be including this in harmony as it’s difficult to support given it needs to add various new CSS classes into the DOM as posts are being loaded by Ajax. Clearly, this isn’t exactly optimum, and in fact, will slow down the rendering process if poorly coded.

    Not sure if it’s my imagination, but v3 seems “oh so slightly” slower than v2. Literally nothing in it, but noticeable to me so clearly, there’s some room for tuning here which I think will be at the nginx level.

    Stay tuned.

    wrote on last edited by
    #12

    @phenomlab said in v3 / Harmony diary:

    perhaps no longer developed

    well, although I understand your choice with Harmony, I believe Persona has its charm and will continue to be developed. you do not think so?

  • More styling work completed today. Started looking at an decent alternative to the scroll top navigator featured on this site. I designed this a while ago and it’s designed to mimic the post scroller in Persona. With a little bit of modification, it would fit harmony very well in my view.

    Currently the code I wrote for this is lying dormant on a VM I created for v3 development but since abandoned when the announcement around the harmony theme was announced. Its going to be hard to walk away from what constitutes around 100 hours of new CSS and js but this was designed for Persona, and my thoughts are given all the fanfare with Harmony, the previous staple theme will fade into obscurity - perhaps no longer developed, meaning I’d have to both fork the last version and maintain it going forward.

    Honestly, I just don’t have time to commit to that, so the decision to turn my back on Persona development has been made, and it’s all harmony from now on. Sadly, this does mean the death knell for the conversation style CSS I developed. I won’t be including this in harmony as it’s difficult to support given it needs to add various new CSS classes into the DOM as posts are being loaded by Ajax. Clearly, this isn’t exactly optimum, and in fact, will slow down the rendering process if poorly coded.

    Not sure if it’s my imagination, but v3 seems “oh so slightly” slower than v2. Literally nothing in it, but noticeable to me so clearly, there’s some room for tuning here which I think will be at the nginx level.

    Stay tuned.

    wrote on last edited by
    #13

    @phenomlab it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc.

  • @phenomlab said in v3 / Harmony diary:

    perhaps no longer developed

    well, although I understand your choice with Harmony, I believe Persona has its charm and will continue to be developed. you do not think so?

    wrote on last edited by
    #14

    @crazycells said in v3 / Harmony diary:

    I believe Persona has its charm and will continue to be developed. you do not think so?

    It’s a feeling I have, and in my experience, something I’ve seen many times. Persona was the default theme shipped with v2, and has been the mainstay of that version for a long time. However, things change, and by NodeBB’s own admission, it needed an update to bring it in line with modern layouts and mobile design. As you know, Harmony is not a fork, but a completely new design that also requires v3 for it to work at all.

    To me, this is the final whistle for Persona. Harmony will supersede it in every way, and eventually, development will stall for the former product with all the focus being on Harmony itself. My view is that Persona will become a community fork to stop it from disappearing completely, but in the same vein, I think most (like me) will jump ship and move to Harmony.

  • @phenomlab it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc.

    wrote on last edited by phenomlab
    #15

    @cagatay said in v3 / Harmony diary:

    it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc

    Yes, I’m glad I’m not the only one to witness this. I am going to raise this with the NodeBB team

    EDIT - raised in the v3 Bug thread
    https://community.nodebb.org/topic/16914/3-0-0-bug-report-thread/76?_=1675420990079

  • @cagatay said in v3 / Harmony diary:

    it seems i gonne use v2 end of this year. because i see that v2 very fast than v3 i mean page speed, user test etc

    Yes, I’m glad I’m not the only one to witness this. I am going to raise this with the NodeBB team

    EDIT - raised in the v3 Bug thread
    https://community.nodebb.org/topic/16914/3-0-0-bug-report-thread/76?_=1675420990079

    wrote on last edited by
    #16

    Ok, spun up the dev VM I started working on

    9097e069-c077-40e4-a949-0b4aeacecca2-image.png

    And here’s a video of the reworked pagination / scroller utility I wrote that fires on pages

    https://sudonix.com/assets/uploads/files/screen-capture.webm

    This was originally designed to work in tandem with the Persona scroller / navigation, but would be simple to convert to Harmony and BS5.

  • Ok, spun up the dev VM I started working on

    9097e069-c077-40e4-a949-0b4aeacecca2-image.png

    And here’s a video of the reworked pagination / scroller utility I wrote that fires on pages

    https://sudonix.com/assets/uploads/files/screen-capture.webm

    This was originally designed to work in tandem with the Persona scroller / navigation, but would be simple to convert to Harmony and BS5.

    wrote on last edited by
    #17

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

  • Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    wrote on last edited by
    #18

    @phenomlab

    Oh It’s very good. I love it 😊

  • Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    wrote on last edited by
    #19

    @phenomlab waiting 🙂

  • wrote on last edited by DownPW
    #20

    @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #21
  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #22

    @DownPW fixed in Dev. Have a look. Many improvements and I think you’ll like it. Try it on both desktop and mobile.

  • @phenomlab said in v3 / Harmony diary:

    Today’s playground 🙂

    c67e0b6c-b534-4306-8e58-dbe77e30c6a0-image.png

    Here’s a video… still needs a bit more work, but… 🙂 Notice the newer scroll and progress bar I was talking about earlier…

    https://sudonix.com/assets/uploads/files/footer-added.webm

    Hello Mark,

    I just tested the functioning of the scroll bar and I saw this bug:

    https://i.imgur.com/VQw5zw5.mp4

    It should be moved to the left so as not to encroach on the collapse button of the custom footer navbar.

    Then, when we play with the collapse button of the custom footer navbar we should:

    • When the custom footer navbar is deactivated: it sticks to the bottom right while not encroaching on the right sidebar. All this taking into account the collapse of the right sidebar (not obvious, I don’t know if I’m clear 🙂 )

    • When the custom footer navbar is activated: it moves just to the left of the floatright block or can be above the floatright block?

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Keep the good work my friend 😉

    wrote on last edited by
    #23

    @DownPW said in v3 / Harmony diary:

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Nope. The newest version of Harmony appears to have the same pagination as Flarum and Discourse, so it’s been moved into the content area 😁

  • @DownPW said in v3 / Harmony diary:

    The solution may be less difficult to code would be to make a vertical scrollbar inside the right sidebar like in topics. There might be less to manage

    Nope. The newest version of Harmony appears to have the same pagination as Flarum and Discourse, so it’s been moved into the content area 😁

    wrote on last edited by
    #24

    @phenomlab

    yessss fixed. Love it 😁 😍

  • @phenomlab

    yessss fixed. Love it 😁 😍

    wrote on last edited by DownPW
    #25

    @phenomlab

    No javascript ?

    I wanted to inspect the code but I can’t find any JS

  • @phenomlab

    No javascript ?

    I wanted to inspect the code but I can’t find any JS

    wrote on last edited by
    #26

    @DownPW it’s definitely there. Won’t work without it 😉

  • @DownPW it’s definitely there. Won’t work without it 😉

    wrote on last edited by
    #27

    @phenomlab

    I guess, I don’t find it in inspector lol .I will search 🙂

  • @phenomlab

    I guess, I don’t find it in inspector lol .I will search 🙂

    wrote on last edited by DownPW
    #28

    @phenomlab

    Can I test it on my dev env ?

    EDIT: I test it. If you don’t want tell me Mark

    If I have problem, can I ask you @phenomlab ?

  • @phenomlab

    Can I test it on my dev env ?

    EDIT: I test it. If you don’t want tell me Mark

    If I have problem, can I ask you @phenomlab ?

    wrote on last edited by
    #29

    @DownPW no problems.

  • wrote on last edited by DownPW
    #30

    @phenomlab said in v3 / Harmony diary:

    @DownPW no problems.

    Seems I miss something 😑 @phenomlab but good start 😉

    [- https://i.imgur.com/cN0YeN0.mp4 -]

    EDIT: Maybe find

    EDIT 2: @phenomlab

    Find --> I have forget toAbove and toBottom css directives
    It’s better now, just seems toBottom doesn’t work :

    b64bdc12-435e-468d-9818-c966b4cbc148-image.png

    .toBottom {
      bottom: 0px !important;
      right: 0px!important;
    }
    
    .toAbove {
      bottom: -5px !important;
      right: 400px !important;
    }
    
  • @phenomlab said in v3 / Harmony diary:

    @DownPW no problems.

    Seems I miss something 😑 @phenomlab but good start 😉

    [- https://i.imgur.com/cN0YeN0.mp4 -]

    EDIT: Maybe find

    EDIT 2: @phenomlab

    Find --> I have forget toAbove and toBottom css directives
    It’s better now, just seems toBottom doesn’t work :

    b64bdc12-435e-468d-9818-c966b4cbc148-image.png

    .toBottom {
      bottom: 0px !important;
      right: 0px!important;
    }
    
    .toAbove {
      bottom: -5px !important;
      right: 400px !important;
    }
    
    wrote on last edited by
    #31

    @DownPW likely you are missing z-index on that class. As you are using position: absolute the index is needed to bring that specific element forward. By default, it’ll sit behind the progress bar meaning it cannot be clicked, but can be seen.


Related Topics
  • External Links - New Window

    Solved Customisation nodebb links settings
    8
    2 Votes
    8 Posts
    2k Views
    phenomlab
    @Sampo2910 search the forum here for ogproxy which is the client side version of that plugin I wrote. It’s in use here on this forum.
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    15k Views
    phenomlab
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • Block Domain

    Solved Let's Build It code javascript block domain nodebb
    26
    1 Votes
    26 Posts
    11k Views
    DownPW
    Yes ogproxy too is functionnal on dev
  • NodeBB v3 Android Problem

    Solved Configure nodebb android
    4
    4 Votes
    4 Posts
    2k Views
    cagatay
    thank you fixed.
  • Want to use Sudonix themes ?

    Chitchat themes nodebb
    80
    1
    34 Votes
    80 Posts
    30k Views
    cagatay
    omg thank you Mark.
  • Easier to read code and pre blocks

    Announcements code pre
    1
    1 Votes
    1 Posts
    929 Views
    No one has replied
  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    3k Views
    phenomlab
    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.
  • Platform development diary

    Announcements technology platform new
    9
    1 Votes
    9 Posts
    4k Views
    phenomlab
    It’s been a while since I checked in here. Plenty going on - mostly around rectifying small pockets of resistance between light and dark modes, plus the addition of new features such as an enhanced reputation system and the ability to create polls. Plus, there are several changes going on under the hood which are completely transparent to users or the operation of the platform. However, some changes mean that the platform does need to be restarted for code changes to stick and function correctly. I tend to do this during non busy periods, but sometimes, it’s unfortunately inevitable. The good news is that in most cases, a full restart takes only 20 seconds. More to come