3 ms·

Show HN: DSLR Webcam List (Cam Link Compatible)

1 points by dewey 7y ago

iamben 7y ago
The table list is cut off for me (unless I zoom my browser right out). You could probably add: display: block; overflow-x: scroll; as an inline style or to your CSS for the table (which has the ID 'example') and you'll get a horizontal scroll bar on it.
- dewey 7y ago
  Thanks, I just pushed the fix!
leeoniya 7y ago
you should remove `display: block` from <table> and add `position: sticky; top: 0;` to <thead>. otherwise the table becomes worthless as soon as the header is out of view.
- dewey 7y ago
  Fixed, thanks for that! I'm not really a frontend developer and whipped this up during breakfast...as you can see :)
  - leeoniya 7y ago
    sorry, i misled you. you cannot add sticky to thead, you have to apply it to the cells: thead th { position: sticky; top: 0; background: white; }
    - dewey 7y ago
      For some reason that works locally but not when deployed. Slightly confused. Thanks for the hint, I'll figure it out :)
tedyoung 7y ago
These aren't (all) DSLR, many are mirrorless (would be good to label which are which). I know that seems pedantic, but mirrorless cameras are better able to run unlimited video out, vs. DSLRs that may timeout after a while.
tedyoung 7y ago
UI: recommend moving the search box closer to the list itself. Right now doing a search isn't obvious that it changed anything. Recommend using positive labels instead of negative ones, e.g., replace "Not fully compatible" with "Fully Compatible" (not quite sure what "compatible" means here, though). Combine the two columns for resolution, not sure why these are separate? You also have "Connection" twice. Compatibility: what does "full", "partial", and "none" mean? The last column has links, but they don't look like links. As of this comment, can't scroll horizontally on desktop, the overflow-x:scroll needs to be on the container div.
- dewey 7y ago
  Good feedback, thanks a lot! I'll work my way through the list. It's basically based on the list from Elgato (https://www.elgato.com/en/gaming/cam-link/camera-check https://www.elgato.com/en/gaming/cam-link/camera-check) right now that's why some labels are "negative". I removed these now, I think they are mostly used for their interface as they display in different ways if something is recommended or needs some customization.

1 points by dewey 7y ago

The table list is cut off for me (unless I zoom my browser right out). You could probably add: display: block; overflow-x: scroll; as an inline style or to your CSS for the table (which has the ID 'example') and you'll get a horizontal scroll bar on it.

dewey 7y ago
Thanks, I just pushed the fix!

leeoniya 7y ago

you should remove `display: block` from <table> and add `position: sticky; top: 0;` to <thead>. otherwise the table becomes worthless as soon as the header is out of view.

dewey 7y ago
Fixed, thanks for that! I'm not really a frontend developer and whipped this up during breakfast...as you can see :)
- leeoniya 7y ago
  sorry, i misled you. you cannot add sticky to thead, you have to apply it to the cells: thead th { position: sticky; top: 0; background: white; }
  - dewey 7y ago
    For some reason that works locally but not when deployed. Slightly confused. Thanks for the hint, I'll figure it out :)

tedyoung 7y ago

These aren't (all) DSLR, many are mirrorless (would be good to label which are which). I know that seems pedantic, but mirrorless cameras are better able to run unlimited video out, vs. DSLRs that may timeout after a while.

tedyoung 7y ago

UI: recommend moving the search box closer to the list itself. Right now doing a search isn't obvious that it changed anything. Recommend using positive labels instead of negative ones, e.g., replace "Not fully compatible" with "Fully Compatible" (not quite sure what "compatible" means here, though). Combine the two columns for resolution, not sure why these are separate? You also have "Connection" twice. Compatibility: what does "full", "partial", and "none" mean? The last column has links, but they don't look like links. As of this comment, can't scroll horizontally on desktop, the overflow-x:scroll needs to be on the container div.

dewey 7y ago
Good feedback, thanks a lot! I'll work my way through the list. It's basically based on the list from Elgato (https://www.elgato.com/en/gaming/cam-link/camera-check https://www.elgato.com/en/gaming/cam-link/camera-check) right now that's why some labels are "negative". I removed these now, I think they are mostly used for their interface as they display in different ways if something is recommended or needs some customization.