Seeing Stars, CSS Inputs, JS Table Filtering, and Postgres Exports

Another hodge-podge of reports for what’s been keeping me busy the past few days.

Star Ratings

Who knew making a set of 5 interactive rating stars would be so complicated!I found a series of articles (1 2 3 4) and an accompanying repo which gives a pretty comprehensive approach of one way of doing it. Of course my implementation isn’t exactly like-for-like so quite a bit of fiddling around with this over the past day or so. At the moment it’s been left a bit buggy but good enough to move on in the interest of going LIVE.

Styling CSS Inputs

Related, I also have been learning about styling CSS checkbox and radio inputs. They are generally ugly by default, but they can’t be styled with CSS. A way to get around this is to hide the actual inputs and design their labels instead.

One hot tip on hiding the inputs is to do the following instead of setting display: none:

input[type=radio],
input[type=checkbox] {
  opacity: 0;
  filter: opacity(0%);
  position: absolute;
}

This helps with accessibility, as the inputs remain tab-able for keyboard use.

W3 Schools For The Win? Table Filter & Sort

I also worked on some filterable/sortable tables and was very surprised to find the W3 Schools had some decent articles to help with this. This one covers sorting a table and this one was helpful for setting up some filter buttons. The code is a bit obtuse and verbose but it was a good starting point to plan out what I would actually write.

Side note: This library list.js can be used to do all of these things and more…might be worth looking into if a greater need arises.

PostgreSQL Exports

Found a very handy and thorough article about exporting Postgres data to a csv file through the command line. I heard about this from the Scaling Postgres Podcast which I think tops the list of nerd podcasts I listen to 🤓 😂