Kbin Usability Pack 0.2.2 - Now with settings!
Kbin Usability Pack 0.2.2 - Now with settings!
What is this?
So after tinkering for a while with my Subscriptions Panel (please feel free to try that one out too, btw!), I thought I'd take a go at cleaning up some of my other experiments that I have been playing around with and share them with the world.
That's how the Kbin Usability Pack was born, which is a growing very opinionated collection of enhancements and tweaks that I'm using myself.
Features
- Inline preview of Kbin articles.
- Improved media preview.
- Drag to resize media preview (only images, currently).
- Larger preview buttons
- Keyboard shortcuts for upvoting, downvoting, boosting, opening article and previews.
- Fixed mobile menu to respect default homepage instead of just always linking to "/".
- Changed logo behaviour on mobile to navigate to home instead of opening mobile menu. Hamburger menu still opens menu.
- Moved thumbnails to the left.
- Slight tweaking to general CSS, especially on mobile.
- Infinitely scrolling comments.
- Subheader on articles showing the full link URL (also opens link in new tab when clicked)
- Overhauled settings panel with new components and asynchronous changes.
Keyboard shortcuts
Feed
A: Upvote.
Z: Downvote.
B: Boost.
O: Open article.
Enter: Enter article selection.
Enter, when article is selected: Toggle previews (press once to open article preview, twice to open media preview and three times to close previews).
Up/down arrow: Move between selected articles.
Escape: Exit article selection.
A selected article is indicated by a dotted border.
Article page
A: Upvote article.
Z: Downvote article.
B: Boost article.
O: Open link in new tab.
Enter: Toggle media preview.
Todo
This project is still absolutely in its infancy so do expect some bugs and occasional weirdness.
The following things are currently in the immediate pipeline:
- Further media preview enhancements.
- Handle more built-in settings like auto media preview.
Screenshots
Inline preview of an article (0.0.1)
New media preview and article preview (0.0.1)
Some fancy preview in a preview (0.0.1)
Updates
0.1.0
- Added keybind ("O") to open article.
- Added kebindings to article page (toggle preview, open link in new tab, vote, boost).
- Improved article preview styling.
- Changed comment link in feed to link to article instead of the comment section.
- Added enhanced media preview to article page.
- Added subheader to article page to show full link URL (also opens link in new tab if clicked).
- Added infinite scroll to article comments.
- Added logo, because why not?
0.1.1
- Fixed article previews in compact mode
- Fixed some layout quirkiness.
- Fixed missing get parameters in URL subheader.
0.1.2
- Fixed thumbnails missing rounded corners.
0.2.0
Added settings enhancements
-
New components for toggles and enums.
-
Settings save in the background without reload (reload is still required for some settings to apply, though).
-
Compatible with existing settings and any third party settings, like for Kbin Enhancement Script.
-
Fallback for custom settings types.
-
Collapsable sections (hold shift to toggle all)
-
Support for live changes that apply immediately without reload (currently only KUP settings).
-
Support for settings descriptions (currently only KUP settings)
Enhancements that can be toggled in settings
-
URL subheader
-
Article preview button
-
Remove anchor from comment links.
0.2.1
- Fixed issue with handling third party settings
0.2.2
-
Increased compatibility with other scripts that modify the settings panel.
-
Added Compatibility Mode setting to disable the KUP settings enhancement to legacy settings.
-
Added setting to toggle infinite comment scroll.
-
Added setting to always expand settings sections.
-
Added anchor to comment sorting panel to automatically scroll back to the comments section after reload.
-
Fixed styling of settings switches in Safari.
0.3.0 and beyond
0.3.0 has been released and further discussions can be found here:
this looks amazing!! i just started using it and having a look around. i really love the nice ease when you open the post preview button. the drag to resize is phenomenal.
i know it's really early on still, but one thing i'm noticing right away is that links are not distinguishable in the preview, so you cant tell what is a link with the preview (not an issue when you click into a post). i have imagus which allows me to hover over image links and displays them so in this video I show where the links are, which is the only way i could tell. see here
but anyway, thanks for putting this together! i am having fun experimenting with it and am excited to see where it goes from here ❤︎
That should now be fixed in the latest release. The article preview is still a bit wonky sometimes when there's a lot of rich content, which I'm still trying to work out.
I could probably solve it by just wrapping in an iFrame, but that would be the coward's way out and I can't have that.
just updated it, it looks great, links are perfectly distinguishable. thanks for the fix! also, i love the new icon for KUP, it's looking like it's gonna be Kbin's own RES ♡
kudos to you for opting for a more elegant solution, good luck in discovering it :D
In compact mode, some inline expanded articles and images seem to be pushed very far to the right.
Now that really opened some can of worms. I ended up cleaning up a lot of the CSS in the process, but I think everything should work now if you update to version 0.1.1.
Edit: Of course I managed to break something. I pushed a new update 0.1.2 that should fix the missing rounded corners on the thumbnails that I think disappeared in the last update.
Amazing work, thank you so much!
Does anyone know a way to install userscripts on mobile firefox?
You can use tamper monkey as an add on. Depending on the format the script is provided in, you can drop it in there or may need to add a few lines for css for instance
Please give me a shout if/when you find any bugs.
I'm primarily targeting Chrome and mobile Safari since that's what I'm using myself, but I'll try to keep compatibility with as many major configurations as possible.
This is great, thanks for releasing it.
For anyone wondering if this plays nice with the enhancement script I can say I haven't noticed any issues.
I'm struggling to understand the usefulness of this one tho;
Subheader on articles showing the full link URL (also opens link in new tab when clicked)
It just seems to waste a bit of space by adding another link that's the same as the header?
You can just hover/hold on the header to see the full url.I can see it being useful in the feed where you don't actually have a direct link to the content currently but it's not displayed there.
Thanks! I really appreciate the feedback. Everything is very experimental by nature, so it’s great to hear what works and and doesn’t.
I will of course add some settings soon so that most of these changes can be toggled off, but here’s the reasoning for this one:
- I felt that I wanted more clearly distinguish between articles with links and without. By default, links to articles, websites, cross posts on Kbin and even articles without links are visually very similar. Even more so, links can include both an article and an attached image, making it very confusing what one is clicking on.
By adding the sub header, I hoped to make it more clear what you are clicking on before you do it.
-
The information is of course already available when hovering over the link, but at least I felt that was unnecessarily cumbersome to do every time and that also doesn’t work well on tablets and mobiles.
-
I definitely want to add it to the feed too, but sadly I don’t have access to that data there without fetching it separately (which is infeasible to do for every entry in the feed).
Technically, I already populate the article object when generate the preview, so maybe I can figure out something smart.
- I tried to keep the sub header as slim as possible, so it should hopefully have a minimal impact on the total vertical height of the header.
I hope that makes sense. I’m not claiming I’m necessarily right, but that’s my reasoning at least. :)
Edit: Also I definitely recommend the enhancement script too. I’m using it myself and I’ve deliberately opted to not include features already present there, even when I had my own solution. Maybe I’ll rethink that later, but that is not my focus right now.
Ah I can see your reasoning now, that does make sense so you can see if there even is a link attached at all.
Also, I am currently running my own script which does fetch the content link for every post and replaces the header link in the feed with the content link, it's not ideal for sure but I'm not a fan of having to click so much to get to the content.