css: vertical-align: middle;
vertical-align: middle; "The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box." mdn docs nice!
Posts
notes on the "webs next transition" post by kent dodds
Kent writes about the webs next transition (Oct '22) Tech which powers the web (http, html, js, css) were all developed over 25 years ago (eek!) Major architectural patterns over that time multi page apps (MPA); the era of html pages, java server pages all code (persistence, data fetching & mutation, rendering, routing) runs on server except UI interaction in browser cons: full page refreshes and ui feedback control pro: simple architecture and code management progressively enhanced multi page apps (PEMPAs); the era of jquery, mootools etc code including rendering runs on server and UI both (if no js then fallback to MPA mode pro: improved UI interaction, more control on FE con: more complex architecture, code management, code duplication single page apps; era of backbone, angular, ember, react, vue routing, data fetching & mutation code is on both server and FE but only rendering and UI Feedback on the FE pro: less code on server (most all routing on FE, rendering o...
using react-chartjs to create a clickable bar chart
chartjs is a popular (58k github stars) charting library which supports many different kinds of charts react-chartjs is a wrapper for chartjs for react apps. It provides a number of components such as Bar which are easy to use to create charts. I used react-chartjs 2 days ago to create a clickable bar chart for our hackathon project and it's pretty freaking awesome. I have 1 simple dataset and needed each bar to be clickable. Took less than 2 hours to use react-chartjs and learn how to get it working. Others on the team were using D3 and that has a much steeper learning curve (although very powerful). Here's what my chart looks like. Each bar is clickable and calls an onClick handler I passed to the Bar component. I followed this react-chartjs example but had just 1 dataset (instead of 2 as in the example). Here's a gist of the code (I modified a larger file so apologies for any mistakes) which has what you'll need to get it setup and working.