Posts

Showing posts from November, 2022

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!

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...

OKRs and agile

  OKRs Objectives and KRs for the team are the responsibility of the team.  Goal setting and committing require collaboration, planning and estimating by the team doing the work. Everyone is responsible, must stay engaged and communicate status to each other and their managers.  All Objectives/KRs for the squad start as "Low Confidence" This includes rolled over goals which reset back to low confidence on rollover from previous quarter. They remain so until squad reviews, projects effort and delivery. Product must get engineering projections for Goals before they can be published (otherwise it's Low Confidence)  Objectives should be prioritized. Critical Goals which are "must have" must be identified. A "must have" goal will require more buffer to ensure it's made. Goals can also be classified as Stretch Goals for a time duration (e.g. quarter) Progress needs to be re-evaluated during the work e.g. if a goal is projected to take 6 weeks then there ...

using react-chartjs to create a clickable bar chart

Image
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.