Nao

  • Dadman with a boy
  • Posts: 16,082
Mini-menu implementation
« on February 14th, 2013, 07:05 PM »
Quote from Nao on February 14th, 2013, 06:20 PM
To answer the question you're thinking of -- yes, it's actually up and running, has been for about 5 minutes, seems to work, but I'm not extremely happy with the extra overhead... It adds like 1.1KB of code in the script footer area, and about 300 gzipped bytes to the script file. Really not happy with that...
Of course, it also 'removes' 300 bytes from the topic.js file (but what do I care.....), and it implements likes. (Not Ajaxively yet, obviously.) So that's about 110 bytes saved per thought, and as there are 10 thoughts on the homepage, it saves, ahem... 1.1KB of code. Whatever... But the repeated likes compress obviously much better than my mini-menu code.
Currently...
1.0KB of code per page, and adds 275 bytes to script. (I was wrong earlier, it wasn't 300 originally, but 400.)
I can't do much better really... mini-menus simply take a lot of code.
I had to do something I really don't enjoy -- storing the events as strings, and then running them with .click(new Function('e', string))... OMG, my eyes!! eval()!!! If I tried to do it like in eves, i.e. by declaring anonymous functions, I'd have to somehow transmit the current ID to the event function in a way that's not very cool either... (global?!)

I'm just stuck for now.
Sure, it looks nice to have a mini-menu for thoughts. And if you load a topic page, you actually load less JS overall, because the overhead is only in the homepage, and in topic pages you're not forced to download the (internal to script.js) HTML for new thoughts, which represents about 150 bytes of gzipped code.

But I don't know whether it's worth it. It's fucked up.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re : Mini-menu implementation
« Reply #1, on February 14th, 2013, 07:30 PM »
Hmm, lots to think about.

I'd argue that minimenus would be nice to have as generic code available everywhere, not just in topics, and I can see places where mod authors might want to include them.

Seems to me that it would be worth it because it would usually be cached, it's the file most likely to be cached and available after jQuery.
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,082
Re : Mini-menu implementation
« Reply #2, on February 14th, 2013, 10:59 PM »
Quote from Arantor on February 14th, 2013, 07:30 PM
Hmm, lots to think about.

I'd argue that minimenus would be nice to have as generic code available everywhere, not just in topics, and I can see places where mod authors might want to include them.
Sure they'd be great as generic things... And I certainly managed to turn them into a template_mini_menu() function in the index template.
However, I'm not satisfied with the difficult balance between byte-saving and complexity.

If you'll look at the source code for thought button creation, it's perfectly geared towards making it short and relatively clean.
Adapting this to a mini-menu required more bytes. It 'works', but I'm not exactly happy with all the extra luggage...

Additionally, you need to create three different arrays, which will then be used to generate the .mime() caller.
These arrays need to be done separately from the templates... Ideally, a mini-menu should 'behave' according to whatever data the *template* feeds it, I'd say.
So, we could move all the data to the DOM. For instance, instead of <div data-id="1234" class="acme">, do something like <div class="acme" data-id="1234" data-special="12345" data-re data-me>, where id=1234 and special=12345 obviously, and we declare a 're' menu entry and another 'me' menu entry. Or <... data-re="12345" data-me="12345">, but it forces repetition.
I don't fucking know what's best.
Plus, the awful Function eval stuff. I hate that.
All in all, maybe I should actually ditch the current mini-menu code and rewrite it entirely (not the looks but the internals), to explicitly set all entries explicitly instead of packing them into some barely understandable system with two-letter entries associated with a larger set of features.

Oh my, why do I always have to go for the complicated rewrites...?!
Or maybe I could just, hmm... I don't know... Separate the 'mini-menu generation' code from the 'mini-menu use' code, i.e. hovering it and showing it, should be in their own function (in script.js), while the generation could be pushed to topic.js for topic menus, and the HTML for thought menus or whatever.
I just don't know...
Quote
Seems to me that it would be worth it because it would usually be cached, it's the file most likely to be cached and available after jQuery.
If only it were that simple...
While most pages viewed will be topic pages, any homepage change is still going to have a huge impact.
Posted: February 14th, 2013, 10:27 PM

I saved another 30 bytes and sighed. Another bug has come up...
Damn.

Oh, it should be said that the generation code represents about 150 bytes, and the animation code is about 200 bytes (at the current time). It's really tempting to get rid of the generation code... :^^;:
Anyway... Time for bed. I'm useless right now.
Re: Mini-menu implementation
« Reply #3, on February 15th, 2013, 04:50 PM »
Saved about 50 more bytes by rewriting a large portion of the mini-menu code.

- It no longer requires the bUseDataId param to be set. It'll just 'guess' by itself... (And yes, that saves bytes. Sigh.)
- No longer shows two different animations (depending on the parent's text-align: look here, it isn't the same whether you hover the Action or User menus.) Instead, the animation is done from the place your mouse cursor is, and thus is 'centered' from here. As such, it doesn't need aligning any further...
- Just some generally smarter code, such as storing all CSS and animation variables in a closure rather than in DOM data().
- Doing something I'm a bit ashamed of -- turning some of the $('<div></div>') DOM creators into $('<div>')... Although jQuery considers it 'bad practice' and has to 'fix' the tags afterwards, I'd just like to say that it just doesn't make a single difference for the user... The only difference is that the short version saved me a couple of bytes, so whatever... :P

Current overhead of mime() plugin is 342 gzipped bytes right now.
Which proves that I had my math wrong yesterday!
Also, generation code = exactly 155 bytes now.
Re: Mini-menu implementation
« Reply #4, on February 15th, 2013, 11:09 PM »
Not happy with script size or outcome.
Not happy with thought menu layout vs the buttons we currently have.

Still, it's at least more in line with the current ui.

Tomorrow I'll try to restore alignments because I really like these.we shall see.

I'm so tired of this...
And I haven't even committed my sbox fix, I just realized...

(No one cares anyway. I shouldn't waste my time saving bytes like that... what matters is adding new features.)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Mini-menu implementation
« Reply #5, on February 15th, 2013, 11:10 PM »
It's OK, I'm not happy with any of the stuff I've done today either. I've been experimenting :whistle: but nothing I want to share yet.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Mini-menu implementation
« Reply #6, on February 15th, 2013, 11:13 PM »
My stuff is commit material. It just isn't "proud author" material. You know. This thing you commit not because you like it but because it would probably hurt more not to commit it, and you start wondering if you're committing to show the amount of work you put into the thing before you get to revert it...

Bed time!

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Mini-menu implementation
« Reply #7, on February 15th, 2013, 11:15 PM »
I know the feeling.

The stuff I have is not commit-ready and I refuse to commit it in the state it's in because it just doesn't work properly, before I even get into the performance issues I can see that might occur.[1]

End of the day the only real judge is yourself.
 1. All I can say is that the table in question is heavily used and more than one SMF/Wedge bug has been because of its reliance on MyISAM ordering. And that combining that with this you might realise what I've been doing today.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Mini-menu implementation
« Reply #8, on February 16th, 2013, 09:06 AM »
If you're working on making use of Sortable in 'public' areas of Wedge......... Please consider using a plugin that doesn't require jQuery UI.
Seriously, I won't give a pass to something that forces people to download jQUI on any public page.
Doing it on a page that's called through the action of a registered member is more acceptable (which is why you had my okay for sorting pinned topics), but it's still something to be careful about.
I haven't been spending an entire day on saving 50 measly bytes in script.js just to have you add 100KB to the lot... :P

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Mini-menu implementation
« Reply #9, on February 16th, 2013, 03:05 PM »
Well... I only put the sortable in a side page that isn't likely to be used that often anyway (it's not a regular member page, but a staff member, it's only just above the admin panel really)

But the area I'm talking about is an admin area. ;)

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Mini-menu implementation
« Reply #10, on February 16th, 2013, 05:58 PM »
Good then.

Alright, I'm still stuck on mini-menus...
I made my peace with the idea of repositioning the menu horizontally based on the mouse position. While it's very nice if the menu hover area is quite large, when it comes to user names and actions, it makes more sense to have the mini-menu position itself right below the element, rather than a few pixels off to the right or left... (Plus, the shortest code I managed to write for this still took an additional 30 bytes... For just a single line...)
The 'solution' for thoughts is, I suppose, to limit the hover area to somewhere small. Something like an "Actions" button that would show on every line. I don't know... Any ideas..?

I know that this feature rewrite doesn't excite anyone right now (and me even less), but for anyone who's been using the thoughts feature, especially on the homepage, this will have an influence on your perceived enjoyment of it...
Posted: February 16th, 2013, 05:45 PM

Oh, also I'd like to know if you think a delay before opening the mini-menus is good or not...
It doesn't add a lot of bytes, because the code is mostly copied from the main menu stuff, and I added it because I originally had the entire area of the thought list hoverable, so it really looked ugly to have a mini-menu open (and close) for each single thought entry just because I was scrolling through the page and moving the mouse around quickly... I added a 200ms delay, which 'works' nicely there, but is annoying in user name & action menus.
I could either reduce the delay to 50ms or so, or completely remove the code and assume that mini-menus will always be applied only to a limited portion of hoverable content.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Mini-menu implementation
« Reply #11, on February 16th, 2013, 06:28 PM »
Quote
Good then.
You know me by now I'm not going to add bytes to every page unnecessarily, it's why I haven't added the search box thing I've thought of for ages because it would add bytes on pretty much every page of usefulness. But I'll see.
Quote
I know that this feature rewrite doesn't excite anyone right now (and me even less), but for anyone who's been using the thoughts feature, especially on the homepage, this will have an influence on your perceived enjoyment of it...
I'm a big user of the thoughts area, it's quite important to me ;) What I do know is that the current buttons have issues - namely when using mobile, and currently I'm seeing cases where a long thought with likes can be impaired by the current buttons on a narrow window (there's a thought that has a long content, but if I go to click on the popup, the buttons are in the way)
Quote
I could either reduce the delay to 50ms or so, or completely remove the code and assume that mini-menus will always be applied only to a limited portion of hoverable content.
I think we really need to try it with a wider audience. My gut says 200ms should be fine for that page given its uses.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Mini-menu implementation
« Reply #12, on February 16th, 2013, 06:51 PM »
- By order of optimization importance: index template HTML, script.js, any other JS file. I'd suggest looking into providing the bare necessary, such as <div id="searchx" data-tid=topicID data-bid=boardID></div>, and then using a cached JS block to suggest a search destination. (Isn't it a good thing that $txt can be cached too by now? :P)

- Mobile is something I strive to look into, but it's not my absolute priority. I did fix something related to this today though, I added 13 bytes of JS to disable username clicks on Android if they're associated with a mini-menu. Fair trade. (..............And here's me thinking about adding browser name/version to JS filenames :lol:)
Anyway, all I can say is, mobiles need a visual clue for a menu, so I guess it's best to show one of the '+' icons and just have the menu show up when hovering these...

- Can't use one delay in a page and no delay in another... :-/

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Mini-menu implementation
« Reply #13, on February 16th, 2013, 07:11 PM »
Quote
- By order of optimization importance: index template HTML, script.js, any other JS file. I'd suggest looking into providing the bare necessary, such as <div id="searchx" data-tid=topicID data-bid=boardID></div>, and then using a cached JS block to suggest a search destination. (Isn't it a good thing that $txt can be cached too by now? :P)
That sort of makes it difficult to make extensible, which is something I did want to do as well.
Quote
- Mobile is something I strive to look into, but it's not my absolute priority. I did fix something related to this today though, I added 13 bytes of JS to disable username clicks on Android if they're associated with a mini-menu. Fair trade. (..............And here's me thinking about adding browser name/version to JS filenames :lol:)
And if you did that you'd erase the 13 bytes of savings. -android-4.0 for example is 12 bytes... and it will only be used once on the page...
Quote
Anyway, all I can say is, mobiles need a visual clue for a menu, so I guess it's best to show one of the '+' icons and just have the menu show up when hovering these...
Non mobiles need a visual cue too...
Quote
- Can't use one delay in a page and no delay in another...
Then use the same delay if any as the topic pages.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Mini-menu implementation
« Reply #14, on February 16th, 2013, 11:22 PM »
And there we go again... Plenty of new posts/topic updates... :^^;: And I still haven't had time to catch up with last week's!
Quote from Arantor on February 16th, 2013, 07:11 PM
That sort of makes it difficult to make extensible, which is something I did want to do as well.
Hmm... Well, I guess that one's still doable.

Oh, a funny CSS extensibility issue I had tons of problems with before -- and still do right now.
Remember how our buttons are based on "ul.actions a", because it solves some inheritance issues and also makes it compress better...?
Well, this system added a problem for .unlike_button, because it wouldn't keep the requested background position.

So, what was my stupid idea of the day..?
"Give up on that strange inheritance thing, and use root classes for buttons."
Oh my.
So, I created a 'virtual button' virtual class, which loads the sprite and sets default paddings and height. Because of the paddings, I was forced to inherit all buttons from that virtual class, even those that overwrite the sprite image. First bad thing...
Then, the .more_button would be screwed up. Why? Because it inherits two classes (the virtual button and .upshrinks), and the upshrinks image is defined BEFORE the virtual button... However, it obviously needs the upshrinks image. So, I had to move the virtual button to before upshrinks... More gzipped bytes. -_-

So, right now it SEEMS to be working for everything...
At a cost of over 100 gzipped bytes.

I spent 2 days on JS files to save a hundred bytes and partly counter the impact that moving the .mime plugin to script.js would have on the main JS file. In the end, it's all lost because of that new problem...

I'm tempted to go back to how it was a few hours ago. But it also means dropping the possibility of finally being able to use buttons anywhere, without them having to be inside an ul.actions class...

What do you think?
I realize I'm pretty mental, but at least it means I'm half cured.
Quote
And if you did that you'd erase the 13 bytes of savings. -android-4.0 for example is 12 bytes... and it will only be used once on the page...
12 bytes before compression.
Also, my latest local files save about 8 bytes in the headers compared to the committed one. I achieved that through passing the $latest_date variable through a % 1000000 operation. So it shaves a few chars off the beginning of the date. Each time you're regenerating the cache files, there's one chance out of a million that the filename will conflict with an earlier version of the cache. And one out of one million means that even if it happens, nobody's going to have the previous version in their cache, it'll be long gone (hopefully)... Heck, I could even reduce it to % 100.000 (I think that's what's currently in my local install), it just means it's one chance out of 100.000...

Anyway.
Quote
Non mobiles need a visual cue too...
The '+' button is a better visual clue that whatever there was before...
Quote
Then use the same delay if any as the topic pages.
I think I'm probably going to remove the delay entirely.