Recommend
15 
 Thumb up
 Hide
62 Posts
1 , 2 , 3  Next »   | 

On-Line Want-List Generator (OLWLG), for Math Trades» Forums » General

Subject: Better OLWLG - A Chrome Extension for Pleasant Trading rss

Your Tags: Add tags
Popular Tags: [View All]
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
Hello everyone!

I started working on some custom stylesheets to make the OLWLG more aesthetically appealing, only to find that some of the things I wanted to to do were impossible with just CSS. One thing lead to another and I ended up developing a Chrome extension that completely restyles the OLWLG, while providing better support for users with disabilities as well.

Install it here!

Currently, it does the following:
- Restyles the entire application.
- User profiles appear in smaller dropdown cards rather than take up half the screen.
- Better screen reader support on the profile page.
- Better screen reader support on the item listing (Step 3) page.
- Links in comments correctly render in the collection page.

As a warning, it does increase page load time. Behind the scenes, the extension is chopping up the page and recreating it to allow for more complicated styling, and that doesn't come free. On a 7000 item listing, it took about 25-30s for me. While I don't mind a single long load too much, you might; if so, Better OLWLG is not the extension for you.

Goals
Better OLWLG attempts to lower the information density, which should help new users figure out what everything means without finding themselves overwhelmed, and should help experienced users lessen the fatigue from scrolling through thousands of listings.

It also modifies some pages with the hope of providing better support for users with disabilities. I've listed more detail on the accessibility changes in the Github repository. If you're a user with a disability whom Better OLWLG's accessibility features may help, please let me know what improvements you'd like to see.

Screenshots!




(Note: the name Better OLWLG is just because I was thinking about BetterTTV, a similar extension for twitch.tv, and I couldn't think of anything else for the life of me. The OLWLG is great, but I'm a front end developer who cares about colors and stuff.)
8 
 Thumb up
12.00
 tip
 Hide
  • [+] Dice rolls
Matt D
United States
Peachtree corners
Georgia
flag msg tools
badge
Avatar
mbmbmbmbmb
Looks interesting. Will definitely give it a spin for my current math trade.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
arg bummer... doing "view source" I get original markup... I was hoping to find out which of the methods you used to get the table column headers in step 4 to be diagonal and line up with the columns!? I recall looking into this years ago but never found anything that worked good enough.

also quick typo report... at bottom of page you have

"Improvements from AcceptableIce's Better OLWGL. Icon pack by Icons8."

that should be OLWLG.
4 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Eric Sokolowsky
United States
Laurel
Maryland
flag msg tools
Avatar
mbmbmbmbmb
The screenshots look very nice! I may have to try using this.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
MC Crispy
United Kingdom
Basingstoke
Hampshire
flag msg tools
Avatar
mbmbmbmbmb
I would think that those dark green/blue bands could give folk with visual contrast or colourblindness some difficulty! I have aesthetic objections to them, but could cope, others may not be so fortunate.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
JeffyJeff wrote:
arg bummer... doing "view source" I get original markup... I was hoping to find out which of the methods you used to get the table column headers in step 4 to be diagonal and line up with the columns!? I recall looking into this years ago but never found anything that worked good enough.

also quick typo report... at bottom of page you have

"Improvements from AcceptableIce's Better OLWGL. Icon pack by Icons8."

that should be OLWLG.
Those are actually stolen from my old attempt to make an OLWLG clone. If you right click->Inspect Element you should get be able to see the modified DOM in the Elements tab, if you're using a modern browser.

Also, good catch, that'll be fixed in the next version.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
mccrispy wrote:
I would think that those dark green/blue bands could give folk with visual contrast or colourblindness some difficulty! I have aesthetic objections to them, but could cope, others may not be so fortunate.
Yeah, I'm not thrilled with those, I need to think about what to do with them a bit more.

As for colorblindness, that's something I don't actually know a lot about. I feel like the background colors in the item list that show the item's status (on wishlist, owned, etc) might have some colorblind issues, which is part of the reason why I added the word next to the item name. Still wondering if there are some changes to those colors I could make to prevent them looking the same to common colorblindness variants.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Christopher Grace
United States
Lynnwood
Washington
flag msg tools
badge
Avatar
mbmbmbmbmb
AcceptableIce wrote:
mccrispy wrote:
I would think that those dark green/blue bands could give folk with visual contrast or colourblindness some difficulty! I have aesthetic objections to them, but could cope, others may not be so fortunate.
Yeah, I'm not thrilled with those, I need to think about what to do with them a bit more.

As for colorblindness, that's something I don't actually know a lot about. I feel like the background colors in the item list that show the item's status (on wishlist, owned, etc) might have some colorblind issues, which is part of the reason why I added the word next to the item name. Still wondering if there are some changes to those colors I could make to prevent them looking the same to common colorblindness variants.
Generally, if colorblindness causes the colors themselves to wash out and appear similar, it's useful to have them contrast in relative brightness.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
AcceptableIce wrote:
JeffyJeff wrote:
arg bummer... doing "view source" I get original markup... I was hoping to find out which of the methods you used to get the table column headers in step 4 to be diagonal and line up with the columns!? I recall looking into this years ago but never found anything that worked good enough.
Those are actually stolen from my old attempt to make an OLWLG clone. If you right click->Inspect Element you should get be able to see the modified DOM in the Elements tab, if you're using a modern browser.
I'm using chrome... checking it looks like for the applicable TH's you are like this css tricks site is nesting a DIV and SPAN in the TH and using a css transform... though I'm having trouble seeing the actual transform you are using

I also tried looking at your github but couldn't figure out what file to look in for the css?

btw will it break your extension if I implement diagonal TH's directly from the olwlg? I also only want to build it in if it works on all common browsers.... you don't have to worry about that since the extension is specifically for chrome... I guess I could if I implement it have it do it only when client are known browsers that it works with

 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
JeffyJeff wrote:
I also tried looking at your github but couldn't figure out what file to look in for the css?
ok I didn't find it by browser on github but I grabbed the whole thing and found it ... in

app/assets/stylesheets/math_trades.scss

I'll have to figure out which parts you are using for the diagonal cell heaers. fwiw I tried using the css from that css-tricks site and it does indeed make the cell diagonal... but the cell is showing not at the top of the column where it should be but to the right of the table and fwiw it does break your tool
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
-=::) Dante (::=-
United States
KEW GARDENS
New York
flag msg tools
badge
Avatar
mbmbmbmbmb
Copying this over from the other thread:

JeffyJeff wrote:
also out of curiosity does this work with the chrome checkbox checker/unchecker extension?
Please do look into whether this can be made compatible because using a checkbox extension is damn near a necessity for the heavier Math Traders which make up the most passionately dedicated core of OLWLG users.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
United Kingdom
Hinckley
Leics
flag msg tools
Avatar
mbmbmbmbmb
NuMystic wrote:
Copying this over from the other thread:

JeffyJeff wrote:
also out of curiosity does this work with the chrome checkbox checker/unchecker extension?
Please do look into whether this can be made compatible because using a checkbox extension is damn near a necessity for the heavier Math Traders which make up the most passionately dedicated core of OLWLG users.
Yes .... and no. It used to be essential, I agree, but not quite so much nowadays after JJ implement the "own values" matching function. It'd certainly be goo to have though.

BTW: I like this extension very much, but as it is really only the UI and not the processing which has changed (e.g. wantlist generation, value assignments etc), might the title not be better as

Better OLWLG UI - A Chrome Extension for Pleasant Trading

Thanks to OP for the work in producing something very nice!
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
JeffyJeff wrote:
JeffyJeff wrote:
I also tried looking at your github but couldn't figure out what file to look in for the css?
ok I didn't find it by browser on github but I grabbed the whole thing and found it ... in

app/assets/stylesheets/math_trades.scss

I'll have to figure out which parts you are using for the diagonal cell heaers. fwiw I tried using the css from that css-tricks site and it does indeed make the cell diagonal... but the cell is showing not at the top of the column where it should be but to the right of the table and fwiw it does break your tool
Yeah, you have to do a lot of pixel-by-pixel readjustment to get the diagonal headers to work correctly. I also had to ignore the colgroups to get it working (#wants colgroup { display: none; })

And no worries about it breaking it, I figured it would. It's pretty easy to update it to account for the DOM changes if I know about them.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
enoon wrote:
NuMystic wrote:
Copying this over from the other thread:

JeffyJeff wrote:
also out of curiosity does this work with the chrome checkbox checker/unchecker extension?
Please do look into whether this can be made compatible because using a checkbox extension is damn near a necessity for the heavier Math Traders which make up the most passionately dedicated core of OLWLG users.
Yes .... and no. It used to be essential, I agree, but not quite so much nowadays after JJ implement the "own values" matching function. It'd certainly be goo to have though.

BTW: I like this extension very much, but as it is really only the UI and not the processing which has changed (e.g. wantlist generation, value assignments etc), might the title not be better as

Better OLWLG UI - A Chrome Extension for Pleasant Trading

Thanks to OP for the work in producing something very nice!
But there's better accessibility too
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
NuMystic wrote:
Copying this over from the other thread:

JeffyJeff wrote:
also out of curiosity does this work with the chrome checkbox checker/unchecker extension?
Please do look into whether this can be made compatible because using a checkbox extension is damn near a necessity for the heavier Math Traders which make up the most passionately dedicated core of OLWLG users.
I'm actually looking into some tweaks that might make a checkbox extension unnecessary.
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
United Kingdom
Hinckley
Leics
flag msg tools
Avatar
mbmbmbmbmb
AcceptableIce wrote:
But there's better accessibility too
The very exemplar of an improved interface
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
Alright, I have a prettier/more modern wants editor interface ready to go with built-in drag to mass edit support. I just need to test saving... which means I gotta wait for the next trade I'm in.

When that time comes, though, it'll be great!
2 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
AcceptableIce wrote:
Alright, I have a prettier/more modern wants editor interface ready to go with built-in drag to mass edit support. I just need to test saving... which means I gotta wait for the next trade I'm in.
I could start a mock/test math trade if you want...
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
JeffyJeff wrote:
AcceptableIce wrote:
Alright, I have a prettier/more modern wants editor interface ready to go with built-in drag to mass edit support. I just need to test saving... which means I gotta wait for the next trade I'm in.
I could start a mock/test math trade if you want...
That'd be great actually. I figured that's what you probably did yourself, but waiting wasn't the worst, I have other projects I could've worked on in the meantime.

But if the option's there, then absolutely.
1 
 Thumb up
5.00
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
AcceptableIce wrote:
That'd be great actually. I figured that's what you probably did yourself, but waiting wasn't the worst, I have other projects I could've worked on in the meantime.

But if the option's there, then absolutely.
ok, mt started...

now Leftovers Mock Test Math Trade early late 2018
2 
 Thumb up
5.00
 tip
 Hide
  • [+] Dice rolls
William Leslie
United States
San Diego
California
flag msg tools
badge
Avatar
mbmbmbmbmb
Just installed this to check it out. For some reason, all of the columns of data are coming out the same narrow size...
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
1.01 is out, it fixes a bunch of the issues y'all reported above and adds the new wantlist editor. There's a new settings page as well where you can choose to use the old wantlist editor if you prefer it.
1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Christopher Grace
United States
Lynnwood
Washington
flag msg tools
badge
Avatar
mbmbmbmbmb
When I try to install, I get an error.

1 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jeff Michaud
United States
Longwood
Florida
flag msg tools
On-Line Want List Generator - Hopefully Making Math Trades a Little Bit Easier
badge
Captain Kirk, Captain Picard, Captain Sisko, Captain Janeway, Captain Archer
Avatar
mbmbmbmbmb
AcceptableIce wrote:
1.01 is out, it fixes a bunch of the issues y'all reported above and adds the new wantlist editor. There's a new settings page as well where you can choose to use the old wantlist editor if you prefer it.
I couldn't figure out how to force chrome to update to new version so I removed it.... now when I try to install the new one I get

"An error has occurred
Package is invalid. Details: 'Could not load javascript 'build/my-wants.js' for content script.'."

edit: ah nija'ed!
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
Jake Roussel
United States
Chicago
Illinois
flag msg tools
Overtext is a bad UX pattern.
badge
Overtext is a bad UX pattern.
Avatar
mbmbmbmbmb
krztoff wrote:
When I try to install, I get an error.

Dammit, I was worried that might happen. Chrome makes it weirdly difficult to test the package you upload.
 
 Thumb up
 tip
 Hide
  • [+] Dice rolls
1 , 2 , 3  Next »   |